@require './font.styl'
@require './config.styl'
@require './code.styl'
@require './wrapper.styl'
@require './sw-popup.styl'

html, body
  padding 0
  margin 0

body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color $textColor
  background-color $bgColor
  --main-color $accentColor

{$contentClass}:not(.custom)

  a:hover
    text-decoration underline

  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px

  img
    max-width 100%

{$contentClass}.custom
  padding 0
  margin 0

  img
    max-width 100%

a
  font-weight 500
  color var(--main-color)
  text-decoration underline
  &:hover
    color var(--main-color) 

p a code
  font-weight 400
  color var(--main-color)

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size .9rem
  color var(--main-color)
  border-left: 3px solid var(--main-color);
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem

  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25
  font-family PT Serif, Serif

  {$contentClass}:not(.custom) > &
    margin-top 'calc(0.5rem - %s)' % ($headerHeight)
    padding-top 'calc(%s + 1rem)' % ($headerHeight)
    margin-bottom 0

  &:hover .header-anchor
    opacity: 1

h1
  font-size 2.2rem

h2
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0

  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColor

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid #dfe2e5

  &:nth-child(2n)
    background-color #f6f8fa

th, td
  border 1px solid #dfe2e5
  padding .6em 1em

::-webkit-scrollbar
  width 6px
  height 6px

::-webkit-scrollbar-track-piece
  background rgba(0, 0, 0, 0.1)
  -webkit-border-radius 6px

::-webkit-scrollbar-thumb:vertical
  height 6px
  background var(--main-color)
  -webkit-border-radius 6px

::-webkit-scrollbar-thumb:horizontal
  width 6px
  background var(--main-color)
  -webkit-border-radius 6px

@require 'mobile.styl'
.go-to-top
  color var(--main-color)!important
.pagination
  .active > a, > .active > span, > .active > a:hover, > .active > span:hover,> .active > a:focus, > .active > span:focus
    background-color: var(--main-color)!important
    border-color: var(--main-color)!important
    color: #fff!important
  > li > a, .pagination > li > span
    color:  var(--main-color)!important
  > .disabled > span, .disabled > span:hover, .disabled > span:focus, .disabled > a,  .disabled > a:hover, .disabled > a:focus
    color: #ddd!important
#nprogress .bar
  background: var(--main-color)!important;